<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>会议安排</title>
    <link rel="stylesheet" type="text/css" href="../../css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/minirefresh.css"/>
    <script src="../../js/mui.min.js"></script>
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/vue.js"></script>
    <script src="../../js/main.js"></script>
    <script src="../../js/minirefresh.js"></script>
</head>
<body>
<div id="app">
<header class="mui-bar mui-bar-nav">
    <span class="back" @click="back"></span>
    <span class="cross" @click="close"></span>
    <h1 class="mui-title" style="left: 80px;right: 80px">会议安排</h1>
</header>
<div class="mui-content">
    <ul class="meeting-tab">
        <li>
            <select v-model="queryTime" @change="ready">
                <option value=0>全部时间</option>
                <option value=1>一周</option>
                <option value=2>一月</option>
                <option value=3>三月</option>
                <option value=4>一年</option>
            </select>
        </li>
        <li>
            <select v-model="queryType" @change="ready">
                <option value=0>全部类型</option>
                <option value=1>我发起的</option>
                <option value=2>我参与的</option>
            </select>
        </li>
        <li>
            <select v-model="state" @change="ready">
                <option value=0>全部状态</option>
                <option value=1>未开始</option>
                <option value=2>已取消</option>
                <option value=3>已结束</option>
            </select>
        </li>
    </ul>
    <div id="minirefresh" class="minirefresh-wrap">
        <div class="minirefresh-scroll">
            <ul class="tabs me-tabs"  style="padding-top: 0;padding-bottom: 0">
                <li v-for="(item,index) in meetings" @click="getMeetingById(item.zgMeetingId)">

                    <div class="me-status-bar" v-if="item.state == 1"></div>
                    <div class="me-status-bar cancel-bg" v-if="item.state == 2"></div>
                    <div class="me-status-bar end-bg" v-if="item.state == 3"></div>
                    <div class="me-status-content">
                        <div class="me-status cancel-text" :class="item.stateValue | getClass">{{item.stateValue}}</div>
                        <div class="me-status-info">
                            <p class="tabs-title me-tabs-title">{{item.content1}}</p>
                            <p class="tabs-content me-tabs-content" style="color:rgb(115,162,255);">{{item.content2}}
                            </p>
                            <p class="tabs-content me-tabs-content"><span>发起人：{{item.createUserName}}</span><span style="margin-left: 30px">{{item.startTime}}</span></p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!--<ul class="report-footer">-->
        <!--<li>-->
            <!--<a href="meeting_add.html">-->
                <!--<div class="footer-btn footer-btn-fir">发起会议</div>-->
            <!--</a>-->
        <!--</li>-->
        <!--<li>-->
            <!--<div class="footer-btn footer-btn-sec" @click="ready">查看会议列表</div>-->
        <!--</li>-->
        <!--<div class="clear"></div>-->
    <!--</ul>-->
    <ul class="report-footer new-footer">
        <li>
            <a href="meeting.html">
                <div>
                    <img src="../../images/report/zhixin_huibao_xhb_icon.png"/>
                </div>
                <p>发起会议</p>
            </a>
        </li>
        <li>
            <a href="###">
                <div>
                    <img src="../../images/report/zhixin_huibao_khb_click_icon.png"/>
                </div>
                <p style="color: rgb(44,154,232)">查看会议列表</p>
            </a>
        </li>
        <div class="clear"></div>
    </ul>
</div>
</div>
</body>
<script>
    function sendInfoToJava(name) {
        //调用android程序中的方法，并传递参数
        javascript:WebView.showInfoFromJs(name);
    }

    var app = new Vue({
        el: "#app",
        data: function () {
            return {
                page: 2,
                pageSize: 4,
                item: {},
                self: true,
                queryTime: 0,
                queryType: 0,
                state: 0,
                meetings: [],
                requestDelayTime: 600,
                flag: true
            }
        },
        filters:{
           getClass: function(input){
               if(input == '未开始'){
                   return "notStart";
               }else if(input == '已结束'){
                   return 'finished';
               }else if(input == '已取消'){
                   return 'withdraw';
               }
           }
        },
        mounted: function() {
            var this_obj = this;
            this_obj.miniRefresh = new MiniRefresh({
                container: '#minirefresh',
                down: {
                    callback: this_obj.downCallback
                },
                up: {
                    isAuto: false,
                    callback: this_obj.upCallback
                }
            });
        },
        methods: {
            back: function () {
                var name = "back";
                sendInfoToJava(name);
            },
            close: function () {
                var name = "close";
                sendInfoToJava(name);
            },
            downCallback: function() {
                var this_obj = this;
                setTimeout(function() {
                    this_obj.ready();
                    this_obj.miniRefresh.endDownLoading(true);
                }, this_obj.requestDelayTime);
            },
            upCallback: function() {
                var this_obj = this;
                setTimeout(function() {
                     this_obj.change_type();
                     this_obj.miniRefresh.endUpLoading(this_obj.flag);
                }, this_obj.requestDelayTime);
            },
            ready: function () {
                var this_obj = this;
                this_obj.meetings = [];
                var read_url = "/meeting/zgMeetings";
                var read_data = {
                    "loginName":localStorage.userName,
                    "companyId":localStorage.companyId,
                    "pageNo": 1,
                    "pageSize": this_obj.pageSize,
                    "queryTime": this_obj.queryTime,
                    "queryType": this_obj.queryType,
                    "state": this_obj.state
                };
                common_ajax(read_url, read_data, function (res) {
                    console.log(res);
                    if (res != null && res.code == 0) {
                        var result = res.obj.result;
                        for (var i in result) {
                            this_obj.meetings.push({
                                zgMeetingId: result[i]['zgMeetingId'],
                                state: result[i]['state'],
                                stateValue: result[i]['stateValue'],
                                content1: result[i].zgMeetingTextReturnList[0]['content'],
                                content2: result[i].zgMeetingTextReturnList[2]['content'],
                                createUserName: result[i]['createUserName'],
                                startTime: result[i]['startTime']
                            });
                        }
                    }
                    this_obj.page = 2;
                    this_obj.flag = false;

                }, function (res) {
                    console.log(res);
                });
            },
            change_type: function () {
                var this_obj = this;
                var url = "/meeting/zgMeetings";
                var read_data = {
                    "loginName":localStorage.userName,
                    "companyId":localStorage.companyId,
                    "pageNo": this_obj.page, //第几页必传
                    "pageSize": this_obj.pageSize, //页有几个数据必传
                    "queryTime": this_obj.queryTime,
                    "queryType": this_obj.queryType,
                    "state": this_obj.state
                };
                common_ajaxs(url, read_data, function (res) {
                    if(res.code < 0){
                        mui.toast(res.errorMsg);
                    }else {
                        if (res != null && res.code == 0) {
                            var result = res.obj.result;
                            for (var i in result) {
                                this_obj.meetings.push({
                                    zgMeetingId: result[i]['zgMeetingId'],
                                    state: result[i]['state'],
                                    stateValue: result[i]['stateValue'],
                                    content1: result[i].zgMeetingTextReturnList[0]['content'],
                                    content2: result[i].zgMeetingTextReturnList[2]['content'],
                                    createUserName: result[i]['createUserName'],
                                    startTime: result[i]['startTime']
                                });
                            }
                            this_obj.page++;
                            setTimeout(function () {
                                if(res.obj.result.length < this_obj.pageSize){
                                    this_obj.flag = true;
                                }else{
                                    this_obj.flag = false;
                                }
                            },600);
                        }
                    }
                },function (res) {
                    console.log(JSON.stringify(res));
                })
            },
            getMeetingById: function (id) {
                location.href = "meeting_detail.html?id=" + id;
            }
        }
    });
    app.ready();
</script>
</html>